<template>
	<view class="page-content">
		<u-navbar autoBack title="结算" bgColor="#D9EDD4" fixed placeholder safeAreaInsetTop></u-navbar>
		
		<view class="container">
			<view class="add-top">
				<view class="address-top" @click="goEdit()" v-if="address==''">
					<u-icon size="30" name="plus"></u-icon>
					<view class="add-text">添加地址</view>
				</view>
				
				<view class="address-item" v-else>
					<view class="address-left">
						<u-avatar size="42" :text="userInfo.username.slice(0,1)" fontSize="18" randomBgColor></u-avatar>
						<view class="userInfo">
							<view class="userInfo-top">
								<view class="userName">{{userInfo.username}}</view>
								<view class="phone">{{userInfo.phone}}</view>
							</view>
							<view class="userInfo-btm">
								{{address}}
							</view>
						</view>
					</view>
					
					<u-icon size="22" name="edit-pen" @click="gonavigate('/pages/setting/editAddress?userId='+userId)"></u-icon>
				</view>
				
				<u-image width="100%" height="3px" src="/static/images/sendBaby/img_border-line.png"></u-image>
			</view>
			<view class="detail-center">
				<view class="carGoodTop" v-for="(item,index) in goodsData" :key="index">
					<u--image :src="item.travel.content.slice(item.travel.content.indexOf(']')+2,item.travel.content.indexOf('￥')+5)" mode="aspectFill" width="100" height="100" radius='10'></u--image>
					<view class="goodIntroduce">
						<!-- <view class="goodDetail">{{item.content}}</view> -->
						<view class="goodDetail">{{item.travel.summary}}</view>
						<view class="goodPrice">石友价：￥{{item.price}}万</view>
					</view>
				</view>

				<view class="plat-service">
					<view class="title">平台服务</view>
					<view class="detail">
						<view class="info1">
							<u-icon name="/static/images/sendBaby/icon_sendBaby-send.png" size="18"></u-icon>
							<view class="detail-text">珠宝玉石鉴定证书</view>
							<view class="detail-right">
								证书介绍
								<u-icon name="arrow-right" size="15"></u-icon>
							</view>
						</view>
						<view class="info2">
							<u-icon name="/static/images/sendBaby/icon_sendBaby-send.png" size="18"></u-icon>
							<view class="detail-text">翡翠产地意见书</view>
							<view class="detail-right">
								证书介绍
								<u-icon name="arrow-right" size="15"></u-icon>
							</view>
						</view>
					</view>
				</view>

				<view class="certificate-type">
					<view class="title">加购证书类型</view>
					<view class="certificate-top">
						<view class="info1">
							<view class="detail-text">翡翠分级证书</view>
							<view class="detail-right">
								证书介绍
								<u-icon name="arrow-right" size="15"></u-icon>
							</view>
						</view>
						<view class="info2">
							<view class="detail-text">￥298/份</view>
							<u-checkbox-group>
								<u-checkbox shape="circle"  inactiveColor='#D9EDD4' iconColor='#D9EDD4' size="20" active-color="green"></u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<view>
						<view class="certificate-btm">
							<u-icon name="info-circle" size="14" color="red"></u-icon>
							<text class="certificate-text">以上购买的证书费用，退货退款不予退回</text>
						</view>
					</view>
				</view>
				
				<view class="price-detail">
					<view class="title">价格明细</view>
					<view class="detail">
						<view>
							<view class="detail-price">
								<view class="item-left">宝贝价格</view>
								<view class="item-right">￥{{totalPrice}}万</view>
							</view>
							<view class="detail-item" v-for="(item,index) in priceDetail" :key="index">
								<view class="item-left">{{item.name}}</view>
								<view class="item-right">{{item.detailText}}</view>
							</view>
							
						</view>
					</view>
				</view>
				
				<view class="remark">
					<view class="title">备注</view>
				</view>
				
				<view class="connect-us">
					<u-icon name="phone" size="20"></u-icon>
					全国服务热线：400-888-8830
				</view>
			</view>
			<view class="account-btm">
				<view class="account-left">
					<view class="account-total">
						总计：{{totalPrice}}万
					</view>
				</view>
				<view class="account-right">
					<button class="account-btn">去支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品id
				travelId: '',
				// 商品图片
				pic: '',
				// 商品数据
				goodsData: [],
				// 总价
				totalPrice: 0,
				userId: uni.getStorageSync('userId'),
				address: '',
				userInfo: [],
				priceDetail: [
					{
						name: '优惠券',
						detailText: '不可用 >'
					},
					{
						name: '珠宝玉石鉴定证书',
						detailText: '￥0'
					},
					{
						name: '翡翠产地意见书',
						detailText: '￥0'
					},
					{
						name: '配送运费',
						detailText: '￥0'
					},
				],
			}
		},
		onLoad(e) {
			this.travelId = e.travelId
			this.getGoodsData();
		},
		onShow() {
			// 用户信息
			uni.request({
				url:"http://localhost:3000/user/getUsersById",
				data:{
					userId: this.userId
				},
				success:(res)=>{
					this.userInfo = res?.data?.data;
					this.address = this.userInfo?.address;
				}
			})
		},
		methods: {
			// go编辑页面
			goEdit(){
				uni.navigateTo({
					url: "/pages/setting/editAddress?userId="+this.userId
				})
			},
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			},
			// 被选中的商品信息
			getGoodsData(){
				uni.request({
					url: 'http://localhost:3000/order/getOrderByIsChoice',
					data: {
						isChoic: 1,
					},
					success: (res) => {
						if (res?.data?.code == 200) {
							this.goodsData = res.data.data
							this.goodsData.forEach((i)=>{
								console.log(i.price);
								this.totalPrice += i.price
							})
						} else {
							this.$u.toast(res?.data?.data?.message);
						}
					},
					fail: (res) => {
						this.$u.toast(res?.data?.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-content {
		.container {
			.add-top {
				padding: $uni-spacing-col-lg 0;
				.address-top{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: $gs-font-lg;
					color: $uni-text-color;
					padding: $uni-spacing-col-lg 0;
					.add-text{
						padding: $uni-spacing-col-lg $uni-spacing-row-sm;
					}
				}
				.address-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: $uni-spacing-col-lg $uni-spacing-row-lg;
					padding: $uni-spacing-col-lg $uni-spacing-row-lg;
					.address-left{
						display: flex;
						align-items: center;
						.userInfo{
							display: flex;
							flex-direction: column;
							padding: 0 $uni-spacing-row-base;
							.userInfo-top{
								display: flex;
								align-items: center;
								.userName{
									font-size: $uni-font-size-base;
									color: $uni-text-color;
								}
								.phone{
									font-size: $uni-font-size-base;
									color: $uni-text-color-grey;
								}
							}
							.userInfo-btm{
								font-size: $uni-font-size-base;
								color: $uni-text-color-grey;
							}
						}
					}
				}
			}
			.detail-center {
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				.title {
					font-size: $uni-font-size-base;
					color: $uni-text-color;
					padding: $uni-spacing-col-sm 0;
					font-weight: bold;
				}
				.info1,.info2 {
					display: flex;
					align-items: center;
					padding: $uni-spacing-col-sm 0;
					.detail-text {
						font-size: $uni-font-size-sm;
						color: $uni-text-color;
					}
					.detail-right {
						display: flex;
						align-items: center;
						font-size: $gs-font-sm;
						color: $gs-color-grey;
					}
				}
				.carGoodTop{
					padding: $uni-spacing-col-sm $uni-spacing-row-lg;
					display: flex;
					.goodIntroduce{
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.goodDetail{
							font-size: $uni-font-size-base;
							color: $uni-text-color;
							padding: 0 $uni-spacing-row-base;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
						}
						.goodPrice{
							font-size: $uni-font-size-base;
							color: $gs-color-hot;
							padding: $uni-spacing-col-lg $uni-spacing-row-base;
							text-align: right;
						}
					}
				}
				.plat-service {
					padding: $uni-spacing-col-sm $uni-spacing-row-lg;
					.detail{
						.info1,.info2 {
							.detail-text {
								font-size: $uni-font-size-sm;
								color: $uni-text-color;
								padding: 0 $uni-spacing-row-sm;
							}
						}
					}
				}
				.certificate-type {
					padding: $uni-spacing-col-sm $uni-spacing-row-lg;
					.certificate-top {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.info1{
							.detail-right {
								padding: 0 $uni-spacing-row-sm;
							}
						}
						.info2 {
							.detail-text{
								padding: 0 $uni-spacing-row-sm;
							}
						}
					}
					.certificate-btm{
						display: flex;
						align-items: center;
						.certificate-text {
							font-size: $uni-font-size-sm;
							color: $gs-color-hot;
							padding: $uni-spacing-col-sm $uni-spacing-row-sm;
						}
					}
				}
				.price-detail {
					padding: $uni-spacing-col-sm $uni-spacing-row-lg;
					.detail {
						.detail-item,.detail-price {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: $uni-spacing-col-sm 0;
							.item-left {
								font-size: $uni-font-size-sm;
								color: #383838;
							}
							.item-right {
								font-size: $gs-font-sm;
								color: $uni-text-color;
							}
						}
					}
				}
				.remark {
					padding: $uni-spacing-col-sm $uni-spacing-row-lg;
				}
				.connect-us {
					padding: $uni-spacing-col-sm $uni-spacing-row-lg;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					bottom: -48px;
				}
			}
			.account-btm {
				width: 100%;
				position: fixed;
				bottom: 0;
				background-color: $gs-jpBg;
				display: flex;
				justify-content: space-between;
				.account-left {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 0 $uni-spacing-row-lg;
					.account-total {
						font-size: $uni-font-size-base;
						color: $gs-color-hot;
						padding: $uni-spacing-col-sm $uni-spacing-row-lg;
					}
					.account-coupon {
						font-size: $uni-font-size-sm;
						color: $uni-text-color;
						padding: $uni-spacing-col-sm $uni-spacing-row-lg;
					}
				}
				.account-right {
					width: 110px;
					.account-btn{
						color: $uni-text-color-inverse;
						font-size: $gs-font-lg;
						background-color: $gs-btn;
						padding: $uni-spacing-col-base $uni-spacing-row-lg;
						border-radius: 0;
					}
				}
			}
		}
	}
</style>